<script>

import KtIcon from "../../../../../components/node-kantboot/components/KtIcon/KtIcon.vue";

import UriDialogOfSave from "./UriDialogOfSave.vue";

export default {
  components: {KtIcon, UriDialogOfSave},
  data () {
    return {
      show: false,
      permission: {},
      uriList: [],
      dialogLoading: false,
      editShow: false
    }
  },
  methods: {
    open (item) {
      this.permission = item;
      this.getUriList();
      this.show = true;
    },
    close () {
      this.show = false
    },
    getUriList(){
      this.$kt.request.send({
        uri: "/system-auth/admin/permission/getUriList",
        data: {
          permissionId: this.permission.id
        },
        stateSuccess: (res) => {
          this.uriList = res.data;
        },
        stateError: (res) => {
          this.$message.error(res.message);
        }
      })
    },
    remove(item){
      this.$confirm(
          this.$kt.i18n.enToGlobal("Are you sure to delete this URI?"),
          this.$kt.i18n.enToGlobal("Tips")
          , {
        confirmButtonText: this.$kt.i18n.enToGlobal("Confirm"),
        cancelButtonText: this.$kt.i18n.enToGlobal("Cancel"),
        type: "warning"
      }).then(() => {
        this.dialogLoading = true;
        this.$kt.request.send({
          uri: "/system-auth/admin/permissionUri/remove",
          data: {
            id: item.id
          },
          stateSuccess: (res) => {
            this.getUriList();
            this.$message.success(res.message);
          },
          stateError: (res) => {
            this.dialogLoading = false;
            this.$message.error(res.message);
          }
        })
      }).catch(() => {
        this.dialogLoading = false;
      });
    },
    edit(item) {
      this.$refs.uriDialogOfSave.open(item);
    }
  }
}

</script>

<template>
  <el-dialog
  v-model="show"
  v-loading="dialogLoading"
  width="600px"
  >
    <el-table
      :data="uriList"
      max-height="calc(100vh - 300px)"
      style="width: 100%">
      <!-- 序号 -->
      <el-table-column
        type="index"
        width="50">
      </el-table-column>
      <el-table-column
        prop="uri"
        label="uri"
        width="300">
      </el-table-column>
      <!-- 编辑 -->
      <el-table-column
        label="operation"
        align="center">
        <template #default="scope">
          <el-button type="primary" @click="edit(scope.row)">
            <kt-icon icon="el-icon-edit"></kt-icon>
          </el-button>
          <el-button
              type="danger" @click="remove(scope.row)">
            <kt-icon
                color="#fff"
                icon="el-icon-delete"></kt-icon>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-divider></el-divider>
    <div style="text-align: center">
      <el-button
          type="primary"
          @click="() => $refs.uriDialogOfSave.newOpen(permission.id)">
        <kt-icon
            icon="el-icon-plus"></kt-icon>
      </el-button>
    </div>
  </el-dialog>


  <uri-dialog-of-save
      ref="uriDialogOfSave"
      @saveSuccess="getUriList"
  ></uri-dialog-of-save>

</template>

<style scoped lang="scss">

</style>